<template>
	<view class="">
		<view class="m-item" v-for="item,index in list" :key="index">
			{{index}} - {{item}} <text @click="onDelete(index)">删除</text>
		</view>
		{{content}}
	</view>
</template>

<script setup>
	// export default {
	// 	props:['content','title'],
	// 	data(){
	// 		return {
	// 			list:[]
	// 		}
	// 	},
	// 	methods:{
	// 		onDelete(index){
	// 			this.list.splice(index,1)
	// 		}
	// 	},
	// 	watch:{
	// 		content(value){
	// 			console.log('watch >>',value);
	// 			this.list.push(value)
	// 		}
	// 	},
	// 	mounted() {
	// 		console.log('mounted >>',this.content);
	// 	}
	// }
	import { ref ,watch} from "vue"
	let list = ref(['javascript'])
	const propObj = defineProps({
		content:String
	})

	watch('propObj.content',(value)=>{
		console.log('value ',value);
		list.value.push(value)
	})
	
	const onDelete = (index)=>{
		list.value.splice(index,1)
	}
	
</script>

<style lang="scss">

</style>